<template>
    <div>
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    fixed
                    prop="id"
                    label="编号"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="书名"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="author"
                    label="作者"
                    width="150">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="120">
                <template slot-scope="scope">
                    <el-button @click="edit(scope.row)" type="text" size="small">修改</el-button>
                    <el-button @click="deleteBook(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                layout="prev, pager, next"
                page-size="6"
                :total="total"
                @current-change="page">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        methods: {
            deleteBook(row) {
                const _this = this;
                axios.delete('http://localhost:8181/book/deleteById/'+row.id).then(function (response) {
                    _this.$alert('《'+row.name+'》删除成功', '消息', {
                        confirmButtonText: '确定',
                        callback: action => {
                            // 重新刷新一下页面（重新加载)
                            window.location.reload();
                        }
                    });
                })
            },
            edit(row) {
                // 这里的 row 拿到的是这一条记录的所有信息 row.id 就可以拿到 id
                // 我们先跳转到修改页面
                this.$router.push({
                    path: '/bookUpdate',
                    query: {
                        id: row.id
                    }
                });
            },
            page(currentPage) {
                const _this = this;
                axios.get('http://localhost:8181/book/findByPage/'+currentPage+'/6').then(function (response) {
                    _this.tableData = response.data.content;
                    _this.total = response.data.totalElements;
                });
            }
        },
        created() {
            const _this = this;
            axios.get('http://localhost:8181/book/findByPage/1/6').then(function (response) {
                _this.tableData = response.data.content;
                _this.total = response.data.totalElements;
            });
        },
        data() {
            return {
                total: 3,
                tableData: [{
                    id: '1',
                    name: '解忧杂货店',
                    author: '东野圭吾'
                }, {
                    id: '2',
                    name: '追风筝的人',
                    author: '卡勒德·胡赛尼'
                }, {
                    id: '3',
                    name: '人间失格',
                    author: '太宰治'
                },]
            }
        }
    }
</script>